<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2020-09-03 09:57:40
 * @LastEditors: ZachGmy
 * @LastEditTime: 2022-06-15 09:48:56
-->
<template>
  <div>
    <!-- 添加按钮 -->
    <div class="addHospital">
      <el-button type="primary" @click="addHospital">+添加</el-button>
    </div>
    <!-- 表格显示医院信息 -->
    <div class="hospitalInfo">
      <el-table :data="hospitalData" stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="name" label="医院名称" width="200">
        </el-table-column>
        <el-table-column prop="introduce" label="医院简介" width="100">
        </el-table-column>
        <el-table-column prop="address" label="医院地址" width="100">
        </el-table-column>
        <el-table-column prop="flags" label="标记"> </el-table-column>
        <el-table-column prop="longitude" label="经度" width="100">
        </el-table-column>
        <el-table-column prop="latitude" label="维度" width="100">
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button @click="toDelete(scope.row.id)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total"
    >
    </el-pagination>
    <!-- 对话框添加用户 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" center>
      <div style="margin: 20px"></div>
      <el-form
        :rules="rules"
        ref="ruleForm"
        :label-position="labelPosition"
        label-width="80px"
        :model="ruleForm"
      >
        <!-- 医院名称 -->
        <el-form-item label="医院名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <!-- 医院简介 -->
        <el-form-item label="医院简介" prop="introduce">
          <el-input v-model="ruleForm.introduce"></el-input>
        </el-form-item>
        <!-- 医院地址  -->
        <el-form-item label="医院地址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <!-- 医院标志 -->
        <el-form-item label="标志" prop="flags">
          <el-input v-model="ruleForm.flags"></el-input>
        </el-form-item>
        <!-- 省份 -->
        <el-form-item label="省份" prop="province">
          <el-input v-model="ruleForm.province"></el-input>
        </el-form-item>
        <!-- 市 -->
        <el-form-item label="市" prop="city">
          <el-input v-model="ruleForm.city"></el-input>
        </el-form-item>
        <!-- 区  -->
        <el-form-item label="区" prop="area">
          <el-input v-model="ruleForm.area"></el-input>
        </el-form-item>
        <!-- longitude -->
        <el-form-item label="经度" prop="longitude">
          <el-input v-model="ruleForm.longitude"></el-input>
        </el-form-item>
        <!-- latitude -->
        <el-form-item label="维度" prop="latitude">
          <el-input v-model="ruleForm.latitude"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">重 置</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提 交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      // 表格医院数据
      hospitalData: [],
      // 分页变量
      // 当前页码
      page: 1,
      // 每页展示数据条数
      pageSize: 5,
      // 数据总条数
      total: 0,
      // 设置对话框
      title: "添加医院",
      dialogVisible: false,
      // from表单数据
      labelPosition: "right",
      ruleForm: {
        name: "",
        introduce: "",
        address: "",
        flags: "",
        province: "",
        city: "",
        area: "",
        longitude: "",
        latitude: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入医院名称",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入医院地址",
            trigger: "blur",
          },
        ],
        province: [
          {
            required: true,
            message: "请输入医院省份",
            trigger: "blur",
          },
        ],
        city: [
          {
            required: true,
            message: "请输入医院城市",
            trigger: "blur",
          },
        ],
        area: [{ required: true, message: "请输入医院地区", trigger: "blur" }],
        longitude: [
          {
            required: true,
            message: "请输入医院经度",
            trigger: "blur",
          },
        ],
        latitude: [
          {
            required: true,
            message: "请输入医院纬度",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.gethospitalData();
  },
  methods: {
    // 拿到医院数据
    async gethospitalData() {
      // 设置参数
      let params = {
        page: this.page,
        pageSize: this.pageSize,
      };
      // 发送请求
      let res = await get("/hospital/pageQuery", params);
      console.log(res.data.list);
      this.hospitalData = res.data.list;
      this.total = res.data.total;
    },
    // 编辑按钮
    handleClick(row) {
      this.title = "编辑医院信息";
      // 将当前点击的这一行的数据 赋值到模态框里
      this.ruleForm = { ...row };

      this.dialogVisible = "true";
    },
    // 添加按钮事件
    addHospital() {
      this.title = "添加医院";
      // this.resetForm(ruleForm);
      this.ruleForm = {};
      this.dialogVisible = "true";
    },
    // 删除按钮
    toDelete(id) {
      // let _this = this;
      this.$confirm("此操作将永久删除该医院, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await get("/hospital/deleteById", { id });
          this.gethospitalData();
          if (res.status == 200) {
            // 提示删除成功信息
            this.$message({
              type: "success",
              message: res.message,
            });
          } else {
            this.$message({
              type: "info",
              message: res.message,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 拿到分页当前页码
    handleCurrentChange(val) {
      this.page = val;
      this.gethospitalData();
    },
    // 取消隐藏对话框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 重置
    resetForm(ruleForm) {
      this.$refs[ruleForm].resetFields();
    },
    // 提交与编辑
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate(async (valid) => {
        if (valid) {
          // 将表单对象提交到对应的接口中
          let res = await post("/hospital/saveOrUpdate", this.ruleForm);
          if (res.status == 200) {
            //提交成功之后给一个提示
            this.$notify({
              title: "成功",
              message: res.message,
              type: "success",
            });
            // 关闭模态框
            this.dialogVisible = false;
            // 刷新页面
            this.gethospitalData();
          } else {
            // 失败也给一个提示
            this.$notify({
              title: "失败",
              message: res.message,
              type: "error",
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
</style>
